<template>
	<view>
		<u-table>
			<u-tr>
				<u-th class='title-layout'>城市<text class="unit">(-)</text></u-th>
				<u-th class='title-layout'>92号<text class="unit">(元)</text></u-th>
				<u-th class='title-layout'>95号<text class="unit">(元)</text></u-th>
				<u-th class='title-layout'>98号<text class="unit">(元)</text></u-th>
				<u-th class='title-layout'>0号<text class="unit">(元)</text></u-th>
			</u-tr>
			<u-tr v-for="item of allData">
				<u-td>{{item['city']}}</u-td>
				<u-td>{{item['92h']}}</u-td>
				<u-td>{{item['95h']}}</u-td>
				<u-td>{{item['98h']}}</u-td>
				<u-td>{{item["0h"]}}</u-td>
			</u-tr>
		</u-table>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allData: [{
						"city": "新疆",
						"92h": "5.64",
						"95h": "6.06",
						"98h": "6.76",
						"0h": "5.24"
					},
					{
						"city": "黑龙江",
						"92h": "5.74",
						"95h": "6.14",
						"98h": "6.97",
						"0h": "5.21"
					},
					{
						"city": "吉林",
						"92h": "5.72",
						"95h": "6.17",
						"98h": "6.72",
						"0h": "5.28"
					},
					{
						"city": "云南",
						"92h": "5.90",
						"95h": "6.33",
						"98h": "7.01",
						"0h": "5.44"
					},
					{
						"city": "湖北",
						"92h": "5.76",
						"95h": "6.16",
						"98h": "7.05",
						"0h": "5.34"
					},
					{
						"city": "浙江",
						"92h": "5.73",
						"95h": "6.10",
						"98h": "6.68",
						"0h": "5.35"
					},
					{
						"city": "湖南",
						"92h": "5.72",
						"95h": "6.08",
						"98h": "6.88",
						"0h": "5.41"
					}
				]
			}
		},
		onLoad() {
			this.loadOilPrice()
		},
		methods: {
			loadOilPrice() {
				return
				uni.showLoading({
					title: '加载中...'
				})
				var weakThis = this
				uni.request({
					url: 'http://apis.juhe.cn/gnyj/query?key=5eca645f7b871ec0affddce7d90835b3',
					method: 'GET',
					success(res) {
						uni.hideLoading()
						if (res.data.error_code == 0) {
							weakThis.allData = res.data.result
							console.log("res.data:====" + JSON.stringify(weakThis.allData))
						}
					},
					fail() {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style>
	.title-layout {
		flex-direction: row;
		display: flex;
		align-items: center;
	}

	.unit {
		color: #757575;
		font-size: 20rpx;
	}
</style>
